<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <router-link to="/toSupplierManagement">
          查看企业详情
          <a-icon type="right-circle" />
        </router-link>
      </div>
      <a-row :gutter="16">
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="设备品牌数量">
            <rose :chartData="productNum" />
            <div style="height:74px"></div>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="供应商产品数量排名">
            <a-button-group slot="extra">
              <a-button v-for="(val, index) in supplierYears" :type="val.type" @click="supplierYearsChange(val)" :key="index">{{ val.name }}</a-button>
            </a-button-group>
            <simple :chartData="supplierProductNum" />
          </a-card>
        </a-col>
        <a-col :span="10">
          <div class="map-box">
            <map-chart :target="target" />
            <ul class="supplier-list">
              <li v-for="(item, index) in supplierList" :key="index" :class="{ checked: item.checked }" @click="supplierClick(index)">{{ item.name }}</li>
            </ul>
          </div>
          <stacked :chartData="yearProductNum" />
        </a-col>
        <a-col :span="7">
          <radar />
          <supplierListModule />
        </a-col>
      </a-row>
    </a-layout-content>
  </div>
</template>

<script>
import Rose from '@/components/CleanBaskDemo/rose'
import MapChart from '@/components/CleanBaskDemo/map'
import Simple from '@/components/CleanBaskDemo/simple'
import Stacked from '@/components/CleanBaskDemo/stacked'
import Radar from '@/components/CleanBaskDemo/radar'
import SupplierListModule from '@/components/CleanBaskDemo/supplierListModule'
export default {
  name: 'SupplierManagement',
  components: {
    Rose,
    MapChart,
    Simple,
    Stacked,
    Radar,
    SupplierListModule
  },
  data() {
    return {
      supplierList: [
        { name: '美的', checked: true },
        { name: '格力', checked: false },
        { name: '海尔', checked: false },
        { name: '史密斯', checked: false },
        { name: '赛格', checked: false },
        { name: '小米', checked: false }
      ],
      target: '美的',
      // 设备品牌数量
      productNum: {
        name: '设备品牌数量',
        data: [
          { name: '空气源热泵', value: 3685 },
          { name: '燃气锅炉', value: 1456 },
          { name: '污水源热泵', value: 856 },
          { name: '地源热泵', value: 1263 }
        ],
        total: 7260
      },
      supplierYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      // 不同供应商产品数量排名
      supplierProductNum: [
        { name: '小米', subVal: 6500, value: 0.65 },
        { name: '美的', subVal: 5200, value: 0.52 },
        { name: '海尔', subVal: 4800, value: 0.48 },
        { name: '史密斯', subVal: 4200, value: 0.42 },
        { name: '海格', subVal: 3800, value: 0.38 },
        { name: '格力', subVal: 3200, value: 0.32 },
        { name: '奥克斯', subVal: 2600, value: 0.26 }
      ],
      // 各年度供货情况
      yearProductNum: {
        name: '各年度供货情况',
        data: [
          { num3: 407, num2: 150, num1: 107, name: '小米' },
          { num3: 466, num2: 300, num1: 203, name: '美的' },
          { num3: 587, num2: 366, num1: 207, name: '海尔' },
          { num3: 769, num2: 580, num1: 303, name: '史密斯' },
          { num3: 410, num2: 288, num1: 90, name: '海格' },
          { num3: 564, num2: 456, num1: 303, name: '格力' },
          { num3: 379, num2: 254, num1: 90, name: '奥克斯' }
        ]
      }
    }
  },
  methods: {
    supplierClick(index) {
      this.supplierList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.target = ele.name
        }
      })
    },
    supplierYearsChange(val) {
      this.supplierYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.supplierProductNum = [
            { name: '小米', subVal: 6500, value: 0.65 },
            { name: '美的', subVal: 5200, value: 0.52 },
            { name: '海尔', subVal: 4800, value: 0.48 },
            { name: '史密斯', subVal: 4200, value: 0.42 },
            { name: '海格', subVal: 3800, value: 0.38 },
            { name: '格力', subVal: 3200, value: 0.32 },
            { name: '奥克斯', subVal: 2600, value: 0.26 }
          ]
          return
        case '2019年':
          this.supplierProductNum = [
            { name: '小米', subVal: 6600, value: 0.66 },
            { name: '美的', subVal: 5300, value: 0.53 },
            { name: '海尔', subVal: 4900, value: 0.49 },
            { name: '史密斯', subVal: 4300, value: 0.43 },
            { name: '海格', subVal: 3900, value: 0.39 },
            { name: '格力', subVal: 3200, value: 0.33 },
            { name: '奥克斯', subVal: 2700, value: 0.27 }
          ]
          return
        case '2020年':
          this.supplierProductNum = [
            { name: '小米', subVal: 6700, value: 0.67 },
            { name: '美的', subVal: 5400, value: 0.54 },
            { name: '海尔', subVal: 5000, value: 0.5 },
            { name: '史密斯', subVal: 4400, value: 0.44 },
            { name: '海格', subVal: 4000, value: 0.4 },
            { name: '格力', subVal: 3400, value: 0.34 },
            { name: '奥克斯', subVal: 2700, value: 0.27 }
          ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
